<template>
  <div class="help-list">
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:95px;min-height: 500px;" ref="my_scroller">
      <order-item :datalist="list" @getOrder="handleGetOrder" @remove="handleRemove"></order-item>
    </scroller>
    <div class="foot">
      <div class="to-look add" @click="showDetails">
        <div class="box">
          <i class="icon-yijiedan"></i>
          <!-- <badge class="badge" text="1"></badge> -->
        </div>
        <span class="price">{{myObtainMoney}}元</span>
      </div>
      <div style="background:#EFA79B;" class="to-look" @click="$router.push('/order?id=1&status=2')">去查看</div>
    </div>
    <confirm v-model="showConfirm"
      title="删除提醒"
      @on-cancel="showConfirm=false"
      @on-confirm="onConfirm">
      <p style="text-align:center;">确认取消该订单吗？</p>
    </confirm>
    <confirm v-model="confirmOrder"
      title="接单提醒"
      @on-cancel="confirmOrder=false"
      @on-confirm="onConfirm">
      <p style="text-align:center;">确认接下该单吗？</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import OrderItem from '../common/OrderList';
import { getUnixTime } from '../../js/utils'
import {
  Badge,
  Confirm
} from 'vux';
const IndexStore = namespace('list');

@Component({
  components: {
    Confirm,
    Badge,
    OrderItem
  }
})
export default class HelpList extends Vue {
  @IndexStore.Action getPaotuiList;
  @IndexStore.Action getObtainPaotui;
  @IndexStore.Action getMyObtainMoney;
  @IndexStore.State paotuiList;
  @IndexStore.State myObtainMoney;
  showConfirm = false
  confirmOrder = false
  list = []
  id = null
  currentPage = 1
  pageSize = 10
  noDataText = '--我也是有底线的--'
  infinite () {
    this.expressList()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  handleGetOrder (id) {
    this.id = id;
    this.confirmOrder = true
  }
  handleRemove () {
    this.showConfirm = true
  }
  onConfirm () {
    const params = {
      _id: this.id
    }
    this.getObtainPaotui(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('抢单成功', 'middle');
        this.expressList()
        this.getObtainMoney()
      }
    })
  }
  expressList () { // 获取跑腿单列表（帮帮忙订单）
    const params = {
      current: this.currentPage,
      pageSize: this.pageSize,
      createTime: getUnixTime(this.myTime),
      type: '1'
    }
    this.getPaotuiList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.paotuiList
        // this.list = list.sort(() => Math.random() - 0.5)
        this.list = this.list.concat(list.sort(() => Math.random() - 0.5))
      }
    })
  }
  getObtainMoney () {
    this.getMyObtainMoney().then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      }
    })
  }
  showDetails () {
    console.log('帮帮忙详情')
  }
  created () {
    // this.expressList()
    window.localStorage.getItem('loginInfo') && this.getObtainMoney()
  }
}
</script>
<style lang="less">
  .help-list {
    .foot {
      border-top: 1px solid #E5E5E5;
      background: #ffffff;
      bottom: 0;
      left: 0;
      width: 100%;
      position: fixed;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        color: #666666;
      }
      i {
        color: #1AAD19;
        font-size: 20px;
      }
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 44px;
        font-size: 13px;
      }
      .box {
        position: relative;
        width: initial;
        margin-right: 10px;
        display: flex;
      }
      .to-look {
        text-align: center;
        line-height: 44px;
        color: #ffffff;
      }
      .badge {
        position: absolute;
        top: 2px;
        left: 10px;
      }
      .add {
        width: 100px;
        background: none;
      }
    }
  }
</style>
